<template>
	<view class="rapidLogin">
		<view class="rapidLogin-nav">
			<view class="wrapper">
				<view class="rapidLogin-text">
					<text>欢迎回来！</text>
				</view>
				<view v-if="judge">
				
					<view class="confirm-btn">
						<text>微信快速登录（推荐）</text>
					</view>
					<view class="confirm-btn" @click="confirm()">
						<text>手机注册登录</text>
					</view>
				</view>
				<view v-if="!judge">
					<view class="input-item">
						<view class="input-namg">
							<view class="tit">手机号码</view>
							<view class="phone"><input v-model="phone "/></view>
						</view>
					</view>
					<view class="input-item">
						<view class="input-namg">
							<view class="tit">密码</view>
							<view class="phone"><input v-model="password"/></view>
						</view>
					</view>
					<view class="confirm-btn" @click="login()">
						<text>登入</text>
					</view> 
					<view class="forget-sections">
						<view class="forget-section">忘记密码?</view>
						<view class="register-section">还没有账号?<text>马上注册</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
               judge:true,
			   phone :'13132323233',
			   password:'asd123456'
			}
		},
		methods:{
			confirm(){
				this.judge=false
			},
			login(){
				var phone=this.phone
				var password=this.password
				uni.request({
					url: this.$C.webUrl+`m.api?_gp=user&_mt=login&phone=${phone}&password=${password}`, //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log(res)
						uni.setStorageSync('Token', res.data.data.accessToken);
						uni.setStorageSync('nickname', res.data.data.nickname);
						uni.setStorageSync('avatarUrl', res.data.data.avatarUrl);
						if(res.data.errmsg=='成功'){
							uni.switchTab({
								url: '../home/home'
							});
							uni.showToast({
							    title: '登入成功',
							    duration: 2000
							});
						}else{
							uni.showToast({
							    title: '登入失败',
							    duration: 2000
							});
						}
					}
				})
				
			}
		},
	}
</script>

<style>
.rapidLogin{
	width: 100%;
	height: 100%;
	/* background: url(../../static/images/guide2.png)no-repeat; */
}
.rapidLogin-nav{
	width: 85%;
	height: 30%;
	/* border: 1px solid #000000; */
	margin:30% auto;
	vertical-align: middle;
}
.wrapper{
	position: relative;
	    z-index: 90;
	    background: #fff;
	    padding-bottom: 20px;
	
}
.rapidLogin-text{
	margin-bottom: 150upx;
}
.welcome{
	position: relative;
	    left: 25px;
	    top: -45px;
	    font-size: 23px;
	    color: #555;
	    text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}
	 
.confirm-btn{
	width: 320px;
	    height: 38px;
	    line-height: 38px;
	    border-radius: 50px;
	    margin-top: 35px;
	    background: #fa436a;
	    color: #fff;
	    font-size: 16px;
		text-align: center;
}

/*  */
.input-item{
	width: 100%;
	height: 120upx;
	background: #F8F6FC;
	margin-bottom: 30upx;
}

.tit{
	height: 25px;
	    line-height: 30px;
	    font-size: 13px;
	    color: #606266;
}
.phone{
	height: 30px;
	    font-size: 15px;
	    color: #303133;
	    width: 100%;
}
.input-namg{
	margin-left: 30upx;
}
.forget-sections{
	width: 60%;
	margin: auto;
	text-align: center;
}
.forget-sections{
	margin-top: 20upx;
	font-size: 30upx;
	color: #5DA7FD;
	
}
.register-section{
	margin-top: 200upx;
	color: #000000;
}
.register-section text{
	color: #5DA7FD;
}
</style>
